<template>
  <div class="SinglesPage">
      <div class="header">
          <img src="@assets/images/singlesPage/header.png" alt="">
      </div>
      <div class="goodsList" v-for="oneList in goodsList" :key="oneList.id">
          <div class="dis">
              <img v-lazy="oneList.header" alt="">
          </div>
          <div class="listDivBig"  v-if="oneList.listDivBig.length > 0">
              <img @click="toDetail(img.id)" v-for="img in oneList.listDivBig" :key="img.id" v-lazy="img.url" alt="">
          </div>
          <div class="listDivSmall" v-if="oneList.listDivSmall.length > 0">
              <img @click="toDetail(img.id)" v-for="img in oneList.listDivSmall" :key="img.id" v-lazy="img.url" alt="">
          </div>
      </div>
      <div style="height: 1.18rem;"></div>
      <div class="bottomDiv">
          <p>主会场直通车</p>
          <img @click="toListPage()" :style="{transform:'translate('+deg+'px)'}" class="go" src="@assets/images/singlesPage/go.png" alt="">
          <img @click="toListPage()" class="jian" src="@assets/images/singlesPage/jian.png" alt="">
      </div>
  </div>
</template>
<script>
import Recommend from "@components/Recommend";
import cookie from "@utils/store/cookie";
import debounce from "lodash.debounce";

const CHECKED_IDS = "cart_checked";

export default {
  name: "SinglesPage",
  components: {
    Recommend
  },
  props: {},
  data: function() {
    return {
        deg:'0',
        from1:'h5',
        goodsList:[
            {
                header:require("@assets/images/singlesPage/firstDis.png"),
                listDivBig:[
                    
                ],
                listDivSmall:[
                    {
                        url:require("@assets/images/singlesPage/oneListSmall1.png"),
                        id:'287'
                    },
                    {
                        url:require("@assets/images/singlesPage/oneListSmall2.png"),
                        id:'120'
                    },
                    {
                        url:require("@assets/images/singlesPage/oneListSmall3.png"),
                        id:'290'
                    },
                ]
            },
            {
                header:require("@assets/images/singlesPage/firstDis2.png"),
                listDivBig:[

                ],
                listDivSmall:[
                    {
                        url:require("@assets/images/singlesPage/twoListSmall1.png"),
                        id:'122'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall2.png"),
                        id:'199'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall3.png"),
                        id:'124'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall4.png"),
                        id:'34'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall5.png"),
                        id:'126'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall6.png"),
                        id:'123'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall7.png"),
                        id:'76'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall8.png"),
                        id:'70'
                    },
                    {
                        url:require("@assets/images/singlesPage/twoListSmall9.png"),
                        id:'132'
                    },
                ]
            },
            {
                header:require("@assets/images/singlesPage/firstDis3.png"),
                listDivBig:[
                    {
                        url:require("@assets/images/singlesPage/threeListBig1.png"),
                        id:'56'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListBig2.png"),
                        id:'121'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListBig3.png"),
                        id:'306'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListBig4.png"),
                        id:'291'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListBig5.png"),
                        id:'304'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListBig6.png"),
                        id:'114'
                    },
                ],
                listDivSmall:[
                    {
                        url:require("@assets/images/singlesPage/threeListSmall1.png"),
                        id:'52'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListSmall2.png"),
                        id:'210'
                    },
                    {
                        url:require("@assets/images/singlesPage/threeListSmall3.png"),
                        id:'188'
                    },
                ]
            },
            {
                header:require("@assets/images/singlesPage/firstDis4.png"),
                listDivBig:[
                    {
                        url:require("@assets/images/singlesPage/fourListBig1.png"),
                        id:'27'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListBig2.png"),
                        id:'204'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListBig3.png"),
                        id:'285'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListBig4.png"),
                        id:'186'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListBig5.png"),
                        id:'46'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListBig6.png"),
                        id:'281'
                    },
                ],
                listDivSmall:[
                    {
                        url:require("@assets/images/singlesPage/fourListSmall1.png"),
                        id:'41'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListSmall2.png"),
                        id:'283'
                    },
                    {
                        url:require("@assets/images/singlesPage/fourListSmall3.png"),
                        id:'22'
                    },
                ]
            },
            {
                header:require("@assets/images/singlesPage/firstDis5.png"),
                listDivBig:[
                    {
                        url:require("@assets/images/singlesPage/fiveListBig1.png"),
                        id:'93'
                    },
                    {
                        url:require("@assets/images/singlesPage/fiveListBig2.png"),
                        id:'74'
                    },
                    {
                        url:require("@assets/images/singlesPage/fiveListBig3.png"),
                        id:'271'
                    },
                    {
                        url:require("@assets/images/singlesPage/fiveListBig4.png"),
                        id:'96'
                    },
                ],
                listDivSmall:[
                    {
                        url:require("@assets/images/singlesPage/fiveListSmall1.png"),
                        id:'307'
                    },
                    {
                        url:require("@assets/images/singlesPage/fiveListSmall2.png"),
                        id:'309'
                    },
                    {
                        url:require("@assets/images/singlesPage/fiveListSmall3.png"),
                        id:'308'
                    },
                ]
            },

        ]
    };
  },
  watch: {
    
  },
  mounted: function() {
  },
  created(){
      if(this.$route.query.from1){
        this.from1 = this.$route.query.from1;
      }
      cookie.set("from1", this.from1);
      this.changeDeg();
      if(this.from1 == 'app'){
          this.getTitle();
      }
  },
  methods: {
        changeDeg:function(){
            setInterval(()=>{
                if(this.deg == '0'){
                    this.deg = '5';
                }else{
                    this.deg = '0';
                }
            },500)
        },

        toDetail:function(id){
            if(this.from1 == 'app'){
                this.$router.push({
                    path: "/detail/" + id + "?mer_id=5070770"
                });
            }else{
                this.$router.push({
                    path: "/detail/" + id + "?mer_id=5070770"
                });
            }
            
        },
        toListPage:function(){
            if(this.from1 == 'app'){
                this.$router.push({
                    path: "/goods_list/5070770?from1="+this.from1
                });
            }else{
                this.$router.push({
                    path: "/goods_list/5070770"
                });
            }
             
        },
        getTitle: function() {
            var self = this;
            var u = navigator.userAgent,
                app = navigator.appVersion;
            var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            var obj = {
                action: "setTitle",
                content: {
                title: '双12活动'
                }
            };
            if (isAndroid) {
                App.onAppResponse(JSON.stringify(obj));
            }
        },
  }
};
</script>
<style scoped>
    .SinglesPage{
        width: 100%;
        height: auto;
        background: rgba(180, 0, 2, 1);
    }
    .SinglesPage .header{
        width: 100%;
        height:6.3rem;
        margin-bottom: 0.06rem;
    }
    .SinglesPage .header img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .SinglesPage .goodsList{
        width: 100%;
        height: auto;
        background: rgba(201, 0, 0, 1);
        border-radius: 0.16rem;
    }
    .SinglesPage .dis{
        overflow: hidden;
        margin: 0 0.48rem 0.18rem 0.4rem;
        height: 1.16rem;
        padding-top: 0.16rem;
        box-sizing: border-box;
    }
    .SinglesPage .dis img{
        /* margin-top: 0.16rem; */
        width: 100%;
        height: 100%;
        display: block;
    }
    .SinglesPage .listDivSmall{
        width: 7.3rem;
        margin: 0 0.1rem 0.26rem 0.1rem; 
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
        padding-bottom: 0.2rem;
    }
    .SinglesPage .listDivSmall img{
        width: 2.38rem;
        height: 3.84rem;
        margin-bottom: 0.08rem;
    }
    .SinglesPage .listDivBig{
        width: 7.3rem;
        margin: 0 0.1rem 0.04rem 0.1rem; 
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .SinglesPage .listDivBig img{
        width: 3.62rem;
        height: 5.26rem;
        margin-bottom: 0.08rem;
    }
    .SinglesPage .bottomDiv{
        bottom: 0;
        position: fixed;
        width: 100%;
        height: 1.18rem;
        background: linear-gradient(90deg, #E20F40 0%, #F5520F 100%);
        border-radius: 0.28rem 0.28rem 0px 0px;
        display: flex;
        justify-content: flex-start;
        /* align-items: bottom; */
    }
    .SinglesPage .bottomDiv p{
        font-size: 0.48rem;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 0.66rem;
        margin: 0.3rem 0.66rem 0 1.4rem;
    }
    .SinglesPage .bottomDiv .go{
        width: 1.24rem;
        height: 0.82rem;
        margin-right: 0.06rem;
        margin-top: 0.12rem;
    }
    .SinglesPage .bottomDiv .jian{
        width: 0.52rem;
        height: 0.52rem;
        margin-right: 0.6rem;
        margin-top: 0.38rem;
    }
</style>
